<div *ngIf="icon" class="left-bar">
  <ng-container *nzStringTemplateOutlet="icon">
    <i nz-icon [nzType]="icon"></i>
  </ng-container>
</div>

<div class="title">
  <ng-content></ng-content>
  <ng-container *nzStringTemplateOutlet="title">{{ title }}</ng-container>
</div>

<div class="controls">
  <a *ngIf="showMinimize" (click)="minimizeClick.emit()" title="最小化" class="button minimize">
    <svg class="icon" style="transform: scaleY(0.5)"><use xlink:href="#desk-icon-minimize"></use></svg>
  </a>

  <a
    *ngIf="showMaximize"
    (click)="onMaxIconClick(isMaximized)"
    [attr.title]="isMaximized ? '还原' : '最大化'"
    class="button maximize"
  >
    <svg *ngIf="isMaximized" class="icon"><use xlink:href="#desk-icon-maximize"></use></svg>
    <svg *ngIf="!isMaximized" class="icon"><use xlink:href="#desk-icon-restore"></use></svg>
  </a>

  <a *ngIf="showClose" (click)="closeClick.emit()" title="关闭" class="button close">
    <svg class="icon"><use xlink:href="#desk-icon-close"></use></svg>
  </a>
</div>

<svg style="position: absolute; width: 0; height: 0; overflow: hidden">
  <!--最小化-->
  <symbol id="desk-icon-minimize" x="0px" y="0px" viewBox="0 0 10.2 1">
    <rect width="10.2" height="1" />
  </symbol>

  <!--最大化-->
  <symbol id="desk-icon-maximize" x="0px" y="0px" viewBox="0 0 10.2 10.2">
    <path d="M2.1,0v2H0v8.1h8.2v-2h2V0H2.1z M7.2,9.2H1.1V3h6.1V9.2z M9.2,7.1h-1V2H3.1V1h6.1V7.1z" />
  </symbol>

  <!--还原-->
  <svg id="desk-icon-restore" x="0px" y="0px" viewBox="0 0 10.2 10.1">
    <path d="M0,0v10.1h10.2V0H0z M9.2,9.2H1.1V1h8.1V9.2z" />
  </svg>

  <!--关闭-->
  <symbol id="desk-icon-close" x="0px" y="0px" viewBox="0 0 10.2 10.2">
    <polygon points="10.2,0.7 9.5,0 5.1,4.4 0.7,0 0,0.7 4.4,5.1 0,9.5 0.7,10.2 5.1,5.8 9.5,10.2 10.2,9.5 5.8,5.1 " />
  </symbol>
</svg>
